<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>get</button>
    <button>post</button>
</body>
<script>
    //  前端
    //      1- 如何设置请求方式
    //      2- 如何设置请求地址
    //      3- 如何设置发送的参数
    //      4- 如何接收响应的信息（响应头，响应体）
    //  后端
    //      1- 如何接收前端传递过来的报文信息（请求头，请求体）
    //      2- 如何接收前端传递过来的参数信息
    //      3- 如何给予前端响应（响应头，响应体）
    const btns = document.querySelectorAll("button");
	btns[0].onclick = function(){
		const xhr = new XMLHttpRequest();
		xhr.responseType = "json";// 指定响应体的数据类型
		xhr.open("get","/sum?a=10&b=20");
		xhr.send();
		xhr.onload = function(){
			// 获取到响应体的信息
			console.log(xhr.response);
			// 获取所有的响应头信息
			console.log(xhr.getAllResponseHeaders());
			// 获取指定的响应头信息
			console.log(xhr.getResponseHeader("token"));
			// 响应的状态码
			console.log(xhr.status);// 200
            // 响应的状态码说明
			console.log(xhr.statusText);// ok
        }
    }

	btns[1].onclick = function(){
		const xhr = new XMLHttpRequest();
		xhr.open("post","/sum");
		// // application/json
		// // 1- 指定请求体的数据格式：通过设置名字为Content-Type的请求头’
        // // 第一个参数是请求头的名字，第二个参数是请求头的值
        // xhr.setRequestHeader("Content-Type","application/json");// 必须写在open与send之间
        // // 2- 指定请求体的具体内容'
        // // send接收的数据格式只支持字符串
		// xhr.send(JSON.stringify({
        //     a:100,
        //     b:200
        // }));


		// application/x-www-form-urlencoded
		// 1- 指定请求体的数据格式：通过设置名字为Content-Type的请求头’
		// 第一个参数是请求头的名字，第二个参数是请求头的值
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 必须写在open与send之间
		// 2- 指定请求体的具体内容'
		// send接收的数据格式只支持字符串
		xhr.send("a=100&b=200");
		xhr.onload = function(){
			console.log(xhr.response);
        }
    }
</script>
</html>